<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    node-key="menuid"
    :show-checkbox="showbox"
    default-expand-all
    @node-drag-start="handleDragStart"
    @node-drag-enter="handleDragEnter"
    @node-drag-leave="handleDragLeave"
    @node-drag-over="handleDragOver"
    @node-drag-end="handleDragEnd"
    @node-drop="handleDrop"
    draggable
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
    @node-click="click"
    @check-change="handleCheckChange"
    @check="handleCheck"
  >
  </el-tree>
</template>

<script>
  export default {
    props: ["reload","showbox"],
    data() {
      return {
        data: [],
        //它应该是用来替换属性名称的
        defaultProps: {
          id: "menuid",
          children: "menus",
          label: "menuname",
        },
      };
    },
    watch: {
      //使用父组件传子组件的方式，来触发子组件的某个值的改变，然后通过监听，触发reload更新方法
      reload: function (newValue, oldValue) {
        this.reloadMethod();
      },
    },
    created() {
      this.reloadMethod();
    },
    methods: {
      handleCheck(node,choise){
          //所有被选中的数组
          var arr= choise.checkedKeys;
          this.$emit('choiseMethod',arr);
          console.log("我勾选的菜单的id",arr)
      },
       handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      //初始化数据获取的
      reloadMethod() {
        this.$axios
          .get("/api/rbacMenu/getAllMenu")
          .then((res) => {
            this.data = res.data.data;
          })
          .catch();
      },
      // click点击事件
      click(data) {
        console.log("click", data);
        this.$emit("callfather", data);
      },
      handleDragStart(node, ev) {
        console.log("drag start", node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log("tree drag enter: ", dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        console.log("tree drag leave: ", dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        console.log("tree drag over: ", dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log(dropNode.data.menuid, draggingNode.data.menuid);
        this.$axios
          .get(
            "/api/rbacMenu/updateMenu/" +
              dropNode.data.menuid +
              "/" +
              draggingNode.data.menuid
          )
          .then((res) => {
            console.log(res);
          })
          .catch();
        console.log("tree drag end: ", dropNode && dropNode.label, dropType);
      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log("tree drop: ", dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        if (dropNode.data.label === "二级 3-1") {
          return type !== "inner";
        } else {
          return true;
        }
      },
      allowDrag(draggingNode) {
        return draggingNode.data.menuname.indexOf("三级 3-2-2") === -1;
      },
    },
  };
</script>